import { useState, useEffect } from 'react';
// 导入所需图标
import { AiOutlineAppstore, AiOutlineCheckCircle, AiOutlineCloseCircle,
    AiOutlineWarning, AiOutlineHome, AiOutlineSetting } from 'react-icons/ai';
import './App.css';
import Sidebar from './component/Sidebar'; // 导入侧边栏组件



function App() {
    // 使用React状态管理
    const [data, setData] = useState({
        collectedModels: null,  // 初始化null表示未加载状态
        totalModels: null
    });

    // 模拟异步数据加载
    useEffect(() => {
        const fetchData = async () => {
            // 模拟API请求延迟
            await new Promise(resolve => setTimeout(resolve, 1500));

            // 更新数据状态
            setData({
                collectedModels: 189,  // 实际数据
                totalModels: 256
            });
        };

        fetchData();
    }, []);

    return (
        <div className="App">
            <header className="App-header">
                <h1 className="system-title">数公基核采应用系统</h1>

                {/* 数据展示区 */}
                    <div className="data-card">
                        <span className="data-label">总白模：</span>
                        <span className="data-value">256</span>
                    </div>

                    <div className="data-card">
                        <span className="data-label">已采集：</span>
                        <span className="data-value">189</span>
                    </div>

                    <div className="data-card">
                        <span className="data-label">未采集：</span>
                        <span className="data-value">189</span>
                    </div>

                    <div className="data-card">
                        <span className="data-label">白模报错：</span>
                        <span className="data-value">189</span>
                    </div>

                    <div className="data-card">
                        <span className="data-label">已分户：</span>
                        <span className="data-value">189</span>
                    </div>

                    <div className="data-card">
                        <span className="data-label">已核验：</span>
                        <span className="data-value">189</span>
                    </div>

                <AiOutlineAppstore className="card-icon" />
                <AiOutlineAppstore className="function-icon" />

            </header>
            <Sidebar />
        </div>
    );
}

// 加载动画组件
const LoadingSpinner = () => (
    <div className="spinner-container">
        <div className="loading-spinner"></div>
    </div>
);

export default App;